<template>
  <th-card title="资料收集" v-if="form.rdInformationDTO && form.rdInformationDTO.length">
    <view class="info-list">
      <view v-for="item in form.rdInformationDTO" :key="item.id" class="info-list-main">
        <view class="info-list-row">
          <view class="info-list-label">资料名称</view>
          <view class="info-list-value">{{ item.informationName }}</view>
          <view v-if="item.delFlag == 1">
            <wd-tag plain bg-color="red" color="red">废弃</wd-tag>
          </view>
        </view>
        <view class="info-list-row">
          <view class="info-list-label">资料描述</view>
          <view class="info-list-value">{{ item.informationDesc }}</view>
        </view>
        <view
          class="info-list-row"
          v-if="item.rdInformationProfileEntity && item.rdInformationProfileEntity.length"
        >
          <view class="info-list-label">附件</view>
          <view class="info-list-value">
            <view style="display: flex; flex-direction: column">
              <view
                v-for="file in item.rdInformationProfileEntity
                  .filter((item) => item.profileType != 'web')
                  .filter((item) => item.delFlag != 1)"
                :key="file.id"
                @click="previewFileHandle(file.profileUrl)"
                class="info-row-item"
              >
                {{ file.profileInfo }}
              </view>
            </view>
          </view>
        </view>
        <view class="info-list-row" v-if="item.informationWeb">
          <view class="info-list-label">网址</view>
          <view class="info-list-value info-row-item" @click="previewWeb(item.informationWeb)">
            {{ item.informationWeb }}
          </view>
        </view>
      </view>
    </view>
  </th-card>

  <th-card title="合成路线" v-if="form.rdCraftEntity && form.rdCraftEntity.length">
    <view class="info-list">
      <view v-for="item in form.rdCraftEntity" :key="item.id" class="info-list-main">
        <view class="info-list-row">
          <view class="info-list-label">名称</view>
          <view class="info-list-value">{{ item.craftName }}</view>
          <view v-if="item.delFlag == 1">
            <wd-tag plain bg-color="red" color="red">废弃</wd-tag>
          </view>
        </view>

        <view class="info-list-row">
          <view class="info-list-label">反应条件</view>
          <view class="info-list-value">{{ item.craftDesc }}</view>
        </view>

        <view class="info-list-row" v-if="item.craftUrl">
          <view class="info-list-label">路线</view>
          <view class="info-list-value">
            <!-- <image
                    class="craft-row-img"
                    :src="item.craftUrl"
                    mode="scaleToFill"
                    @click="previewFileHandle(item.craftUrl)"
                  /> -->
            <wd-img
              :width="140"
              :height="140"
              :src="item.craftUrl"
              mode="aspectFit"
              :enable-preview="true"
            />
          </view>
        </view>

        <view class="info-list-row">
          <view class="info-list-label">是否选择</view>
          <view class="info-list-value">
            <wd-switch
              disabled
              v-model="item.isUse"
              :active-value="1"
              :inactive-value="0"
              style="margin: 5rpx 0"
              size="small"
            ></wd-switch>
          </view>
        </view>
      </view>
    </view>
    <th-form-item label="综述" class="form-demandDesc" v-if="form.sampleReviewConclusion">
      <text class="text">{{ form.sampleReviewConclusion }}</text>
    </th-form-item>
  </th-card>

  <th-card title="附件" v-if="form.rdTaskFileEntity && form.rdTaskFileEntity.length">
    <view class="info-list">
      <view class="info-list-main">
        <view class="info-list-row">
          <view class="info-list-value">
            <view style="display: flex; flex-direction: column">
              <view
                v-for="file in form.rdTaskFileEntity"
                :key="file.id"
                @click="previewFileHandle(file.fileUrl)"
                class="info-row-item"
              >
                {{ file.fileName }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </th-card>
</template>
<script lang="tsx" setup>
const form = reactive({
  rdInformationDTO: [],
  rdCraftEntity: [],
  sampleReviewConclusion: '',
  rdTaskFileEntity: [],
});

const init = (row) => {
  form.rdInformationDTO =
    row.rdInformationDTO && row.rdInformationDTO.length ? row.rdInformationDTO : [];
  form.rdCraftEntity = row.rdCraftEntity && row.rdCraftEntity.length ? row.rdCraftEntity : [];
  form.sampleReviewConclusion = row.sampleReviewConclusion;
  form.rdTaskFileEntity = row.rdTaskFileEntity;
};

const previewFileHandle = (file) => {
  uni.navigateTo({
    url: '/pages/pm/preview-online?url=' + file,
  });
};

const previewWeb = (url) => {
  uni.navigateTo({
    url: '/pages/pm/preview-online?url=' + url + '&isWeb=1',
  });
};

defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
.info-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.info-list-main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10rpx;
  margin: 10rpx 0;
  border: 1px solid #e3e3e3;
  border-radius: 8rpx;

  .info-list-row {
    display: flex;
    width: 100%;

    .info-list-label {
      width: 160rpx;
      margin-right: 12rpx;
      font-size: 28rpx;
      color: #808080;
    }

    .info-list-value {
      display: flex;
      flex: 1;
      align-items: center;
      width: 0;
      word-break: break-all;
      white-space: pre-line;
    }
  }
}

.craft-row {
  display: flex;
  align-items: center;

  .craft-row-img-main {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 0;
  }
}

.craft-row-img {
  width: 240rpx;
  height: 240rpx;
}

.form-demandDesc {
  align-items: flex-start !important;

  .text {
    word-break: break-all;
  }
}
</style>
